<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <ul>
        <li v-for="item in letters">{{item}}</li>
      </ul>
      <button @click="btnClick">按钮</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          letters: ['a', 'b', 'c']
        },
        methods: {
          btnClick() {
            // 1.push()
            // this.letters.push('aaa')

            // 2.pop(): 删除数组中最后一个元素
            // this.letters.pop()

            // 3.shift(): 删除数组中第一个元素
            // this.letters.shift()

            // 4.unshift(): 在数组最前面添加元素
            // this.letters.unshift('aaa')

            // 5.splice()：删除元素/插入元素/替换元素
            // 删除元素：第二个参数传入要删除几个元素（没有则删除后面所有元素）
            // 替换元素：第二个参数表示我们要替换几个元素，三个参数是替换前面的元素
            // 插入元素：第二个参数传入0，并且后面跟要传入的元素
            // splice(start)
            // this.letters.splice(1, 2, 'd', 'e', 'f')
            // this.letters.splice(1, 0, 'g', 'h')

            // 6.sort()：排序
            // this.letters.sort()

            // 7.reverse()：翻转数组
            // this.letters.reverse()

            // 注意：通过索引号修改数组中的元素，无法做到响应式
            // this.letters[0] = 'bbb'
            // this.letters.splice(0, 1, 'bbb');
            // Vue.set(要修改的数组, 索引号, 修改后的元素)：Vue内部的方法
            Vue.set(this.letters, 0, 'bbb')
          }
        }
      })
    </script>
  </body>
</html>
